<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pages</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet/less" href="./css/common-1.less">
    <link rel="stylesheet/less" href="./css/index.less">
    <link rel="stylesheet/less" href="./css/about.less">
    <link rel="stylesheet/less" href="./css/page.less">
</head>

<body>
    <div id="bcground">

        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
                <a class="navbar-brand" href="./index.html"><img src="./picture/logo.png" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="./index.html" id="navbarDropdown"
                                    role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Home
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="./index.html">Home Style 01</a>
                                    <a class="dropdown-item" href="./index.html">Home Style 02</a>
                                    <a class="dropdown-item" href="./index.html">Home Style 03</a>
                                    <a class="dropdown-item" href="./index.html">Home Style 04</a>
                                    <a class="dropdown-item" href="./index.html">Home Style 05</a>
                                    <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Header
                                        Styles</a>
                                    <div class="dropdown-menu menu-1" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="#">Home Style 01</a>
                                        <a class="dropdown-item" href="#">Home Style 02</a>
                                        <a class="dropdown-item" href="#">Home Style 03</a>
                                        <a class="dropdown-item" href="#">Home Style 04</a>
                                        <a class="dropdown-item" href="#">Home Style 05</a>
                                    </div>

                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./about.html">About</a>
                            </li>
                            <!-- <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Portfolio
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Portfolio Type 01</a>
                                    <a class="dropdown-item" href="#">Portfolio Type 02</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Portfolio Single</a>
                                </div>
                            </li> -->
                            <li class="nav-item">
                                <a class="nav-link" href="#" style="color: #059f81 !important;">Pages</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Blog
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="./blog.html">Blog Gird</a>
                                    <a class="dropdown-item" href="#">Blog Classic</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Blog Single</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./contact.html">Contact</a>
                            </li>
                            <li class="nav-item logo"><a href="#"><img src="./logo/搜索.png" alt=""></a></li>
                            <li class="nav-item logo"><a href="#"><img src="./logo/分享.png" alt=""></a></li>
                        </ul>



                    </div>

                </div>
            </nav>
        </header>
        <!-- 主页 -->
        <div class="main wow bounceInUp">
            <div class="item wow bounceInUp"data-wow-delay=".5s">
                <h1>OUR SERVICES</h1>
            </div>
            <div class="item-1 wow bounceInUp" style="color: green;"> <a href="#" style="color: white;">home </a><span
                    style="color: white;">- Pages -</span> Our Services</div>
        </div>

    </div>

    <!-- 图片墙 -->
    <div class="picwall ">
        <div class="picbox wow lightSpeedIn">
            <div class="box">
                <figure><img src="./picture/service-1.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Commercial Photography</a></div>
            </div>
            <div class="box">
                <figure><img src="./picture/service-2.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Fashion Photography</a></div>
            </div>
            <div class="box">
                <figure><img src="./picture/service-3.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Wedding & portrait Photography</a></div>
            </div>
            <div class="box">
                <figure><img src="./picture/service-4.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Celebrity Photography</a></div>
            </div>
            <div class="box">
                <figure><img src="./picture/service-5.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Underwater Photography</a></div>
            </div>
            <div class="box">
                <figure><img src="./picture/service-6.jpg" alt=""></figure>
                <div class="introduce"><a href="#">Wildlife Photography</a></div>
            </div>
        </div>
        <input class="load wow bounceInUp" type="button" value="Load more">
    </div>

    <!-- 轮播 -->
    <div class="carousel">
        <h1>PORTFOLIO</h1>
        <h2>My Latest Photography</h2>
        <div class="bd-example">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="pic">
                            <img src="./picture/other-gallery-1.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                            <img src="./picture/other-gallery-2.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                            <img src="./picture/other-gallery-3.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                        </div>
                        <div class="carousel-caption d-none d-md-block rio">
                            <h5>Album Title</h5>
                            <p>Nulla vitae elit libero, <br> a pharetra augue mollis interdum.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="pic">
                            <img src="./picture/other-gallery-2.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                            <img src="./picture/other-gallery-3.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                            <img src="./picture/other-gallery-1.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                        </div>
                        <div class="carousel-caption d-none d-md-block rio">
                            <h5>Second slide label</h5>
                            <p>Lorem ipsum dolor sit amet, <br> consectetur adipiscing elit.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="pic">
                            <img src="./picture/other-gallery-3.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                            <img src="./picture/other-gallery-1.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                            <img src="./picture/other-gallery-2.jpg" class="d-block w-100" alt="..."
                                style="float: left;">
                        </div>
                        <div class="carousel-caption d-none d-md-block rio">
                            <h5>Third slide label</h5>
                            <p>Praesent commodo cursus magna, <br> vel scelerisque nisl consectetur.</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="follow">
            <h1>Fellow me</h1>
            <form action="#">
                <div class="email">
                    <input type="text" placeholder="Enter your email">
                    <button>Subscribe</button>
                </div>

            </form>
        </div>
        <div class="last">
            <div class="left">
                <figure>
                    <a href="#">
                        <img src="./picture/footer-logo.png" alt=""></a>
                </figure>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./logo/facebook.png" alt="" style="width: 60%;">
                        </a>
                    </li>
                    <li><a href="#">
                            <img src="./logo/twitter.png" alt="" style="width: 75%;">
                        </a></li>
                    <li><a href="#">
                            <img src="./logo/instagram.png" alt="" style="width: 75%;">
                        </a></li>
                    <li><a href="#">
                            <img src="./logo/ipr_消息.png" alt="" style="margin: 0%;">
                        </a></li>
                </ul>
                <div class="right-right">
                    <span>© 2019. All rights reserved by</span>
                    <a href="#">17sucai</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/less.min.js"></script>
<script src="./js/wow.min.repeat.js"></script>
<script>
    new WOW().init();
</script>
